.root {
  border-top: 2px solid #dbdbdb;
  padding: 10px 0;
}

.label {
  display: inline-block;
  vertical-align: top;
  font-size: 10px;
  text-transform: uppercase;
  color: #999999;
  line-height: 18px;
  margin-right: 13px;
}

.option {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;

  width: 25px;
  height: 18px;
  margin-right: 8px;

  :global svg {
    width: 100%;
    height: 100%;
  }

  &:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid rgba(0, 0, 0, 0.4);
  }
}

.cc {
  background: radial-gradient(circle closest-corner at 25% 50% , #848484, #ededed 100%);
}
.fc {
  background: radial-gradient(circle farthest-corner at 25% 50% , #848484, #ededed 100%);
}
.cs {
  background: radial-gradient(circle closest-side at 25% 50% , #848484, #ededed 100%);
}
.fs {
  background: radial-gradient(circle farthest-side at 25% 50% , #848484, #ededed 100%);
}

.active {
  &.cc {
    background: radial-gradient(circle closest-corner at 25% 50% , #ffffff, #a0dbff 100%);
  }
  &.fc {
    background: radial-gradient(circle farthest-corner at 25% 50% , #ffffff, #a0dbff 100%);
  }
  &.cs {
    background: radial-gradient(circle closest-side at 25% 50% , #ffffff, #a0dbff 100%);
  }
  &.fs {
    background: radial-gradient(circle farthest-side at 25% 50% , #ffffff, #a0dbff 100%);
  }
}
